<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>聊天</title>
  <style>
    .newTip{color:#aaa;text-align: center;font-size: 12px;}
  </style>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <h1>大众聊天</h1>
  <div id="usersInfo"></div>
  <div id="chatBox"></div>
  <textarea id="messageBox"></textarea>
  <button onclick="sendMessage()">发送信息</button>
  <script>
    // 获取dom节点
    var usersInfo = document.getElementById("usersInfo");
    var chatBox = document.getElementById("chatBox");
    var messageBox = document.getElementById("messageBox");
    // 定义用户信息
    this.user = {
      userid:Date.now(),
      username:window.prompt("请输入用户名","匿名")
    }
    // 连接服务器
    this.socket = io.connect("ws://localhost:5050");
    // 监听用户登录信息
    this.socket.on("login",function(obj){
      console.log(obj,"登录")
      var  str = "总"+obj.onlineCount+"人 ";
      // 把所有有的值转换为数组，通过逗号链接为字符串，截取前20
      var users = Object.values(obj.onlineUsers).join(",").slice(0,20);
      str=str+users;    
      // 更新用户信息
      usersInfo.innerHTML = str;
      // 创建一p节点
      var p = document.createElement("p");
      // 设置class
      p.className="newTip";
      // 定义内容
      p.innerHTML = obj.user.username+"加入聊天室";
      // 追加到chatBox
      chatBox.appendChild(p);
    })
    // 发送用户登录信息
    this.socket.emit("login",this.user);

    // 监听服务器发送的message信息
    this.socket.on("message",function(obj){
      console.log(obj);
      // 创建一个div
     var div = document.createElement("div");
    //  设置div的内容
     div.innerHTML=obj.username+":"+obj.message;
    //  添加到聊天盒子
     chatBox.appendChild(div);
 
    })
    function sendMessage(){
      // 发送信息
      this.socket.emit("message",{...this.user,message:messageBox.value});
      // 情况多行文本框
      messageBox.value="";
    }
    // this.socket.emit("message",{userid:"mumu",message:"我恨你"})
  </script>
</body>
</html>